const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = env => {
  return {
    // cache: {
    //   type: "filesystem",
    //   // 收集在反序列化期间分配的未使用的内存，仅当 cache.type 设置为 'filesystem' 时生效。这需要将数据复制到更小的缓冲区中，并有性能成本。
    //   // allowCollectingMemory: true,
    //   // 缓存的输出地址。默认为 node_modules/.cache/webpack。
    //   cacheDirectory: path.resolve(__dirname, ".temp_cache"),
    // },
    // 缓存方面，进配置该项已经能提升很大的构建速度了
    cache: env.Node_Env === "development" && {
      type: "filesystem",
    },
    mode: env.Node_Env,
    entry: path.resolve(__dirname, "src/index.js"),
    devtool: env.Node_Env === "development" && "source-map",
    output: {
      filename: "[name][chunkhash:5].js",
      clean: true,
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    devServer: {
      open: true,
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: "babel-loader",
            /* options: { 
              // babel-loader的缓存设置，目前来看，效果没有webpack5的cache配置效果好
              cacheDirectory: true,
              cacheCompression: false,
            }, */
          },
          include: path.resolve(__dirname, "src"),
        },
        {
          test: /\.png|jp?eg|gif$/,
          type: "asset",
          parser: {
            dataUrlCondition: {
              maxSize: 4 * 1024, // 4kb
            },
          },
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./public/index.html",
      }),
    ],
  };
}